<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getemployee">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表 employee-->
    <el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="username" label="管理员名称" width="180">
      </el-table-column>
      <el-table-column prop="realName" label="真名" width="180">
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column prop="inputTime" label="录入时间 " width="180">
      </el-table-column>

      <el-table-column prop="status" label="状态" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0" style="color: #11b95c">正常</span>
          <span v-if="scope.row.state == 1" style="color: red;">锁定</span>
          <span v-if="scope.row.state == 2" style="color: gray;">注销</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button v-if="scope.row.state==0" type="warning" size="small" @click="handleEdit(scope.$index, scope.row)">去审核</el-button>
          <el-button v-if="scope.row.state==2" type="success" size="small" @click="handleEdit(scope.$index, scope.row)">人工审核</el-button>
          <el-button v-if="scope.row.state==1" type="danger" size="small" @click="handleEdit(scope.$index, scope.row)">驳回</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="query.rows"
          :total="pageInfo.total"
          :current-page="query.page"
          style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑/修改界面 :visible.sync="saveFormVisible"-->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
        <el-form-item label="套餐名称" prop="sn">
          <el-input v-model="saveForm.employeeName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐价格">
          <el-input v-model="saveForm.employeePrice" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="saveForm.status">
            <el-radio class="radio" :label="1">启用</el-radio>
            <el-radio class="radio" :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>



  </section>
</template>

<script>


export default {
  data() {
    return {
      filters: {
        name: ''
      },
      deptTree: [], // 部门树
      employees: [], // 部门经理
      total: 0,
      page: 1,
      listLoading: false,
      sels: [],//列表选中列

      saveFormVisible: false,//编辑界面是否显示
      editLoading: false,
      saveFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      //新增/修改-界面数据
      saveForm: {
        id:null,
        username:"",
        password:	"",
        realName:	"",
        tel	:"",
        email:	"",
        inputTime	:1665244800000,
        state:1,
        deptId:null,
        tenantId:null,
        type:	null,
        salt	:null,
        loginId:	null
      },
      addFormVisible: false,//新增界面是否显示
      addLoading: false,//加载框
      query:{
        page:1,  // 当前页
        rows:5, // 每页显示条数
        keyword:""  // 关键字-查询条件
      },
      pageInfo:{
        total:0,  // 总条数
        rows:[] // 当前页数据
      }
    }
  },
  methods: {
    //当页面被改变
    handleCurrentChange(val) {
      this.query.page = val;
      this.getemployee();
    },
    //获取用户列表
    getemployee() {
      this.$http.post("sysmanger/employee/list",this.query).then(result =>{
        result = result.data
        if(result.success){
          console.log(result)
          this.pageInfo = result.resultObj
        }else{
          this.$message({message:result.message(),type: 'error'});
        }
      }).catch(result =>{
        this.$message({message: "网络异常,请检查网络!",type: 'error'});
      })
    },
    //删除
    handleDel: function (index, row) {
      if(window.confirm("是否删除")){
        this.$http.delete("sysmanger/employee/"+row.id).then(res =>{
          this.getemployee()
          this.$message({
            message:"删除成功",
            type:"success"
          })
        })
      }
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.saveFormVisible = true; // 展示弹框
      this.saveForm = Object.assign({}, row);// 将当前行的对象赋值给this.saveForm对象
      // 特殊处理manager parent
      // 如果manager parent没有值,为null的话,就给它们赋一个初识对象
      if(!this.saveForm.manager){
        this.saveForm.manager = {
          id:null,
          username:""
        }
      }
      if(!this.saveForm.parent){
        this.saveForm.parent ={
          id:null,
          name:""
        }
      }
    },
    //显示新增界面
    handleAdd: function () {
      this.saveFormVisible = true;
      this.saveForm = {
        employeeName:"",
        employeePrice:null,
        status:0
      };

      //获取管理员树

      //获取类型树


    },
    // 新增/修改的保存
    save: function () {
      this.$refs.saveForm.validate((valid) =>{
        if(valid){
          this.$confirm('确定提交吗!','提示',{}).then(() =>{
            this.addLoading = true //加载框

            //调用后端接口 axios
            this.$http.put("sysmanger/employee",this.saveForm).then(result =>{
              // 获取后端返回的结果
              result = result.data
              if(result.success){
                this.$message({message:"保存成功!",type: 'success'})
                //关闭弹窗
                this.saveFormVisible = false
                // 关闭加载框
                this.addLoading = false
                //重新从第一页查询数据
                this.query.page = 1
                this.getemployee()
              }else {
                this.$message({message: result.message,type: 'error'})
              }
            })
          }).catch(result =>{
            this.$message({message:"网络异常,请检查网络!",type: 'error'})
          })
        }
      })
    },

    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      let ids = this.sels.map(x => x.id); // 取出它们的id,放到一个新数组中
      if(window.confirm("是否删除")){
        this.$http.patch("sysmanger/employee",ids).then(res =>{
          this.getemployee()
          this.$message({
            message:"删除成功",
            type:"success"
          })
        })
      }
    }
  },
  mounted() {
    this.getemployee();
  }
}

</script>

<style scoped>

</style>
